@import "base.less";

html, body {
  height: 100%;
}




#app {
  display: flex;
  height: 100%;
}


main {
  flex: 1;
  height: 100%;
  position: relative;
}


nav {
  width: 200px;
  height: 100%;
  background-color: #333;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  .logo {
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    background-color: #222;

    h4 {
      height: 60px;
      line-height: 60px;
    }
  }


  .menu {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 50px;


    &::-webkit-scrollbar {
      width: 3px;
      background-color: #333;
    }
    &::-webkit-scrollbar-thumb {
      background: #666;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    .unwind {
      .arrow {
        transform: rotate(0deg) !important;
      }

      .sub-menu {
        display: none;
      }
    }

    li {
      a {
        display: block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0 20px 0 30px;
        background-color: #363636;
        border-left: 4px solid #363636;
        color: #eee;
        font-size: 16px;

        .arrow {
          transform: rotate(90deg);
        }
      }

      .sub-menu {
        li {
          a {
            height: 40px;
            font-size: 14px;
            line-height: 40px;
            padding-left: 50px;
            background-color: #333;
          }
          a:hover {
            background-color: rgba(0, 0, 0, 0.4);
            border-left: 4px solid rgba(0, 0, 0, 0.4);
          }
          a.active{
            border-left: 4px solid #007bff;
            background-color: rgba(0, 0, 0, 0.4);
          }
        }

      }


      a.active{
        border-left: 4px solid #007bff;
        background-color: rgba(0, 0, 0, 0.4);
      }

      a:hover {
        background-color: rgba(0, 0, 0, 0.4);
        border-left: 4px solid rgba(0, 0, 0, 0.4);
      }


    }
  }


}


header {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 60px;
  padding: 15px 20px;
  z-index: 101;
  background-color: #fff;
}

iframe {
  position: absolute;
  z-index: 100;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  border: 0;
  padding-top: 60px;
}

